@import '../theme/default.less';

.zent-design-preview-controller {
  position: relative;
  box-sizing: border-box;
  border: 0;

  &__action-btn-delete {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 15;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
  }

  &__icon-delete {
    display: none;

    circle {
      fill: @theme-stroke-5;
    }

    &:hover {
      circle {
        fill: @theme-stroke-4;
      }
    }
  }

  &__icon-add {
    circle {
      fill: @theme-primary-3;
    }

    &:hover {
      circle {
        fill: @theme-primary-2;
      }
    }
  }

  &__action-btn-add-container {
    position: absolute;
    left: 0;
    z-index: 10;
    width: 100%;
    display: none;

    &.zent-design-preview-controller__prepend {
      top: 1px;
    }

    &.zent-design-preview-controller__append {
      bottom: 0;
    }
  }

  &__action-btn-add {
    position: absolute;
    right: 50%;
    margin-right: -8px;
    top: -9px;
    z-index: 5;

    /* ignore whitespace in html */
    font-size: 0;
    line-height: 0;
    width: 17px;
    height: 17px;
    display: inline-block;
    cursor: pointer;

    &:hover {
      + .zent-design-preview-controller__add-marker {
        .zent-design-preview-controller__add-marker-circle {
          border-color: @theme-primary-2;
        }

        .zent-design-preview-controller__add-marker-line {
          background: @theme-primary-2;
        }
      }
    }
  }

  &__add-marker {
    position: absolute;
    left: 0;
    bottom: -2px;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 4;
    display: flex;

    &-circle {
      border: 1px solid @theme-primary-3;
      border-radius: 50%;
      width: 3px;
      height: 3px;
      display: inline-block;
      z-index: 1;
      flex: 0 0 3px;
      background: @theme-stroke-10;
    }

    &-line {
      background: @theme-primary-3;
      height: 1px;
      width: 100%;
    }
  }

  &--editable {
    cursor: pointer;
  }

  &--dragable {
    cursor: move;
  }

  .zent-pop-wrapper {
    margin-left: 1px;
  }

  &:hover &__icon-delete,
  &:hover &__action-btn-add-container {
    display: block;
  }
}

.zent-design-preview-controller--highlight.zent-design-preview-controller {
  &:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-sizing: border-box;
    pointer-events: none;
    display: none;
  }

  &:hover,
  &--selected {
    &:before {
      z-index: 2;
      display: block;
      border: 1px dashed @theme-primary-2;
    }
  }

  &:hover:before {
    opacity: 0.5;
  }

  &--selected:before {
    opacity: 1;
  }
}
